<!DOCTYPE html>
<html lang="en">
<head>
    <link href="favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
    <link href="favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
    <link href="favicon/favicon-194x194.png" rel="icon" sizes="194x194" type="image/png">
    <link href="favicon/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png">
    <link href="favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
    <link href="favicon/site.webmanifest" rel="manifest">
    <link color="#000000" href="/favicon/safari-pinned-tab.svg" rel="mask-icon">
    <link href="favicon/favicon.ico" rel="shortcut icon">
    <meta content="#f7df1e" name="msapplication-TileColor">
    <meta content="favicon/mstile-144x144.png" name="msapplication-TileImage">
    <meta content="favicon/browserconfig.xml" name="msapplication-config">
    <meta content="#ffffff" name="theme-color">
    <title>Асинхронный JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="shower/themes/ribbon/styles/styles.css">
    <style>
        .shower {
            --slide-ratio: calc(16 / 9);
        }

        .f-z_xxl {
            font-size: 90px;
        }

        .f-z_xl {
            font-size: 70px;
        }

        .f-z_l {
            font-size: 50px;
        }

        .f-z_m {
            font-size: 24px;
        }

        .f-z_s {
            font-size: 18px;
        }

        .f-z_xs {
            font-size: 16px;
        }

        .f-z_xxs {
            font-size: 12px;
        }

        .h_full {
            height: 100%;
        }

        .hor__item {
            display: inline-block;
            vertical-align: middle;
        }

        .hor__item_w {
            width: 25%;
        }

        .box {
            display: table;
            height: 100%;
            position: relative;
            width: 100%;
        }

        .box_cover {
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }

        .row {
            display: table-row;
            position: relative;
        }

        .col {
            display: table-cell;
            position: relative;
        }

        .offset_20 {
            bottom: 20px;
            left: 20px;
            right: 20px;
            top: 20px;
        }

        .offset_b_20 {
            bottom: 20px;
        }

        .box_gray {
            background-color: #e1e3e4;
        }

        .m_h_20 {
            margin: 0 20px;
        }

        .m_v_20 {
            margin: 20px 0;
        }

        .m_20 {
            margin: 20px;
        }

        .p-t_20 {
            padding-top: 20px;
        }

        .t-a_c {
            text-align: center;
        }

        .v-a_m {
            vertical-align: middle;
        }

        .w_full {
            width: 100%;
        }

        .link_us {
            display: inline-block;
            font-family: sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 18.18px;
            position: relative;
        }

        .link_us,
        .link_us:after,
        .link_us:before {
            height: 18.18px;
            transition: all 900ms ease, color 450ms ease 750ms, background-color 450ms ease 750ms, font-weight ease 450ms;
            width: 98.98px;
        }

        .link_us:after,
        .link_us:before {
            overflow: hidden;
            content: '';
            bottom: 0;
            left: 0;
            margin: auto;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 0;
            width: 98.98px;
        }

        .link_us:after {
            color: transparent;
            content: attr(data-title);
            font-size: 16px;
            line-height: 18.18px;
            position: absolute;
            text-align: center;
            word-break: break-all;
        }

        .link_us:focus,
        .link_us:hover {
            color: transparent;
            font-weight: 600;
            transition: all 900ms ease 300ms, color 450ms ease, background-color 450ms ease, font-weight 0ms ease 300ms;
        }

        .link_us:focus:after,
        .link_us:focus:before,
        .link_us:hover:after,
        .link_us:hover:before {
            height: 98.98px;
            pointer-events: all;
            transition: all 900ms ease 300ms, color 450ms ease, background-color 450ms ease;
        }

        .link_us:focus:before,
        .link_us:hover:before {
            background-color: #000000;
        }

        .link_us:focus:after,
        .link_us:hover:after {
            color: #ffffff;
            font-size: 20px;
            left: 7px;
            letter-spacing: 15px;
            line-height: 29px;
            box-sizing: border-box;
            top: 14px;
        }
    </style>
</head>
<body class="shower list">

    <header class="caption">
        <h1>Асинхронный JavaScript</h1>
        <p>Сухушин Александр</p>
    </header>

    <section class="slide clear" id="intro">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Асинхронный JavaScript</h2>
                    <p>
                        <em>Сухушин Александр</em>
                        <a class="link_us" data-title="USERSTORY" href="https://userstory.ru/" rel="noopener noreferrer" target="_blank">USERSTORY</a>
                    </p>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover">
                        <img alt="structure" class="cover" src="pictures/sync-async.gif">
                    </div>
                </div>
            </div>
        </div>
        <style>
            #intro {
                padding: 0;
            }

            #intro h2 {
                margin: 30px 0 0;
                text-align: center;
                font-size: 70px;
            }

            #intro p {
                margin: 20px 0 0;
                text-align: center;
                font-size: 20px;
            }
        </style>
    </section>

    <section class="slide" id="description">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Что такое асинхронный?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover f-z_m offset_b_20">
                        <blockquote>
                            <p><strong>Асинхронность</strong> &mdash; не совпадение с чем-либо во времени; неодномоментность, неодновременность, несинхронность
                                &mdash; характеризует процессы, не совпадающие во времени.</p>
                        </blockquote>
                        <blockquote>
                            <p>В компьютерном программировании, асинхронные событиями являются те,
                                которые возникают независимо от основного потока выполнения программы.
                                Асинхронные действия — действия, выполненные в неблокирующем режиме,
                                что позволяет основному потоку программы продолжить обработку.</p>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="sync">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Синхронный или асинхронный</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/YdEBGN/?default-tab=result"
                                title="Checkbox">See the Pen <a href="https://codepen.io/SuhushinAS/pen/YdEBGN/">Sync async request</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="how-thread">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Как это работает?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <h1 class="f-z_xl"><mark>В JavaScript один поток.</mark></h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="how-structure">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Как это работает?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <img alt="structure" class="cover" src="pictures/structure_crop.png">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="how-loupe-simple">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Как это работает?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <p><a href="http://latentflip.com/loupe/" target="_blank">http://latentflip.com/loupe/</a></p>
                        <pre class="f-z_s" style="column-count: 2;">
                            <code>one();</code>
                            <code>function one() {</code>
                            <code>  console.log('One');</code>
                            <code>  two();</code>
                            <code>}</code>
                            <code>function two() {</code>
                            <code>  console.log('Two');</code>
                            <code>  three();</code>
                            <code>}</code>
                            <code>function three() {</code>
                            <code>  console.log('Three');</code>
                            <code>}</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="how-loupe-advance">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Как это работает?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s" style="column-count: 2;">
                            <code>one();</code>
                            <code>function one() {</code>
                            <code>  console.log('One');</code>
                            <code>  setTimeout(two, 20000);</code>
                            <code>  three();</code>
                            <code>}</code>
                            <code>function two() {</code>
                            <code>  console.log('Two');</code>
                            <code>}</code>
                            <code>function three() {</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>  console.log('Three');</code>
                            <code>}</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="how-loupe-expert">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Как это работает?</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s" style="column-count: 2;">
                            <code>$.on('button', 'click', onClick);</code>
                            <code>function onClick() {</code>
                            <code>  console.log('onClick'); </code>
                            <code>  setTimeout(timer, 15000);</code>
                            <code>}</code>
                            <code>function timer() {</code>
                            <code>  console.log('timer');</code>
                            <code>}</code>
                            <code>console.log("One");</code>
                            <code>console.log("Two");</code>
                            <code>console.log("Three");</code>
                            <code>setTimeout(timer, 20000);</code>
                            <code>console.log("Four");</code>
                            <code>console.log("Five");</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="callback-example">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Callback example</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s">
                            <code>function asyncFn(...params, callback) {</code>
                            <code>  const <mark>result</mark> = { <span class="comment">// async code</span> };</code>
                            <code>  callback(<mark>result</mark>);</code>
                            <code>}</code>
                            <code>function callback(<mark>result</mark>) { <span class="comment">// sync code</span> }</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="callback-simple">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Callback simple</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/rooYmM/?default-tab=result"
                                title="Callback simple">See the Pen <a href="https://codepen.io/SuhushinAS/pen/rooYmM/">Callback simple</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="callback-advance">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Callback advance</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/OrpJyj/?default-tab=result"
                                title="Callback advance">See the Pen <a href="https://codepen.io/SuhushinAS/pen/OrpJyj/">Callback advance</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-description">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise example</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <blockquote>
                            <p><strong>Promise</strong> &mdash; это специальный объект, который содержит своё состояние.
                                Вначале pending («ожидание»), затем – одно из:
                                <mark>resolved</mark> («выполнено успешно») или <mark>rejected</mark> («выполнено с ошибкой»).</p>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-example">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise example</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s">
                            <code>function asyncFn(...params) {</code>
                            <code>  return new Promise(function (resolve, reject) {</code>
                            <code>    const {<mark class="important">error</mark>, <mark>result</mark>, status} = { <span class="comment">// async code</span> };</code>
                            <code>    if ('success' === status) { resolve(<mark>result</mark>); }</code>
                            <code>    if ('fail' === status) { reject(<mark class="important">error</mark>); }</code>
                            <code>  });</code>
                            <code>}</code>
                            <code>asyncFn(...params)</code>
                            <code>  .then(function(<mark>result</mark>) { <span class="comment">// sync code</span> })</code>
                            <code>  .catch(function(<mark class="important">error</mark>) { <span class="comment">// sync code</span> });</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-chaining">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise chaining</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s">
                            <code>function asyncFn() {</code>
                            <code>  return Promise.resolve(<mark>2</mark>);</code>
                            <code>}</code>
                            <code>asyncFn()</code>
                            <code>  .then(function (value) { return value + 2; }) <span class="comment">// Promise {&lt;resolved&gt;: <mark>4</mark>}</span></code>
                            <code>  .then(function (value) { return 3 * value; }) <span class="comment">// Promise {&lt;resolved&gt;: <mark>12</mark>}</span></code>
                            <code>  .then(function (value) { return value / 2; }); <span class="comment">// Promise {&lt;resolved&gt;: <mark>6</mark>}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-collapse">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise collapse</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre class="f-z_s">
                            <code>Promise.resolve(1); <span class="comment">// Promise {&lt;resolved&gt;: 1}</span></code>
                            <code>Promise.resolve(Promise.resolve(1)); <span class="comment">// Promise {&lt;resolved&gt;: 1}</span></code>
                            <code>Promise.resolve(Promise.reject(1)); <span class="comment">// Promise {&lt;rejected&gt;: 1}</span></code>
                            <code>Promise.reject(Promise.resolve(1)); <span class="comment">// Promise {&lt;rejected&gt;: 1}</span></code>
                            <code>Promise.reject(Promise.reject(1)); <span class="comment">// Promise {&lt;rejected&gt;: Promise {&lt;rejected&gt;: 1}}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-simple">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise simple</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/QzJaPr/?default-tab=result"
                                style="width: 100%;"
                                title="Promise simple">See the Pen <a href="https://codepen.io/SuhushinAS/pen/QzJaPr/">Promise simple</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="promise-advance">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Promise advance</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/REgPOX/?default-tab=result"
                                title="Promise advance">See the Pen <a href="https://codepen.io/SuhushinAS/pen/REgPOX/">Promise advance</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-sync">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code async</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code>(function() {</code>
                            <code>  return 1;</code>
                            <code>})() <span class="comment">// 1</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-async">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code async</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code>(<mark>async</mark> function() {</code>
                            <code>  return 1;</code>
                            <code>})() <span class="comment">// Promise {&lt;resolved&gt;: 1}</span></code>
                        </pre>
                        <pre>
                            <code>(<mark>async</mark> function() {</code>
                            <code>  throw 1;</code>
                            <code>})() <span class="comment">// Promise {&lt;rejected&gt;: 1}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-promise">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code async</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code>(function() {</code>
                            <code>  return Promise.resolve(1);</code>
                            <code>})() <span class="comment">// Promise {&lt;resolved&gt;: 1}</span></code>
                        </pre>
                        <pre>
                            <code>(function() {</code>
                            <code>  return Promise.reject(1);</code>
                            <code>})() <span class="comment">// Promise {&lt;rejected&gt;: 1}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-async-promise">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code async</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code>(<mark>async</mark> function() {</code>
                            <code>  return Promise.resolve(1);</code>
                            <code>})() <span class="comment">// Promise {&lt;resolved&gt;: 1}</span></code>
                        </pre>
                        <pre>
                            <code>(<mark>async</mark> function() {</code>
                            <code>  return Promise.reject(1);</code>
                            <code>})() <span class="comment">// Promise {&lt;rejected&gt;: 1}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-await">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code await</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code><span class="comment">// sync code</span></code>
                            <code>const result = <mark>await</mark> asyncFn(...params);</code>
                            <code><span class="comment">// sync code</span></code>
                        </pre>
                        <pre>
                            <code><mark>async</mark> function() {</code>
                            <code>  const result = <mark>await</mark> asyncFn(...params);</code>
                            <code>  return result;</code>
                            <code>} <span class="comment">// Promise {&lt;resolved&gt;: result}</span></code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await-code-await-error">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await code await</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <pre>
                            <code>async function() {</code>
                            <code>  try {</code>
                            <code>    const result = <mark>await</mark> asyncFn(...params);</code>
                            <code>    return result;</code>
                            <code>  } catch(error) {</code>
                            <code>    <span class="comment">// handle error</span></code>
                            <code>  }</code>
                            <code>}</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="async-await">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Async/await</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20 t-a_c">
                        <iframe allowfullscreen="true"
                                allowtransparency="true"
                                class="h_full w_full"
                                frameborder="no"
                                scrolling="no"
                                src="//codepen.io/SuhushinAS/embed/REdJWb/?default-tab=result"
                                title="Promise advance">See the Pen <a href="https://codepen.io/SuhushinAS/pen/REdJWb/">Async/await</a>.
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="links">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Ссылки</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <ul class="f-z_s">
                            <li><a href="https://youtu.be/8cV4ZvHXQL4" target="_blank">Philip Roberts: Что за чертовщина такая event loop?</a></li>
                            <li><a href="https://youtu.be/j4_9BZezSUA" target="_blank">Jake Archibald: все что я знаю про Event Loop в JavaScript (2018)</a></li>
                            <li><a href="https://youtu.be/JrmDTZPsla4" target="_blank">Иван Тулуп. Асинхронщина в JS под капотом</a></li>
                            <li><a href="http://latentflip.com/loupe/" target="_blank">Loupe</a></li>
                            <li><a href="https://learn.javascript.ru/promise" target="_blank">Учебник по JavaScript (Promise)</a></li>
                            <li><a href="https://youtu.be/vNEDPtVchfw" target="_blank">CodeDojo: Знакомство с обещаниями</a></li>
                            <li><a href="https://youtu.be/SjNmkeUpQAU" target="_blank">CodeDojo: Создание обещаний</a></li>
                            <li><a href="https://youtu.be/5kAPExqSZ1I" target="_blank">CodeDojo: Асинхронные функции</a></li>
                            <li><a href="https://codepen.io/SuhushinAS/pens/tags/?selected_tag=async" target="_blank">Примеры</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--<style>
            #links li {
                font-size: 18px;
                line-height: 1.25;
                margin-top: 0.75em;
            }
        </style>-->
    </section>

    <section class="slide" id="task-1">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Задание 1</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <p>Реализовать функцию timeout - аналог setTimeout, которая бы возвращала Promise.</p>
                        <pre class="f-z_s">
                            <code>function timeout(ms) { <mark>// code</mark> }</code>
                            <code>timeout(3000).then(function() {</code>
                            <code>  console.log('Прошло 3000 мс.');</code>
                            <code>});</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="task-2">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Задание 2</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <p>Реализовать функцию sleep, которая бы задерживала выполнение асинхронной функции.</p>
                        <pre class="f-z_s">
                            <code>function sleep(ms) { <mark>// code</mark> }</code>
                            <code>fetch('https://randomuser.me/api/?noinfo')</code>
                            <code>  .then(sleep(3000))</code>
                            <code>  .then((response) => {</code>
                            <code>    console.log('Задержка - 3000 мс');</code>
                            <code>  });</code>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="task-3">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Задание 3</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <p><a href="https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4" target="_blank">https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4</a></p>
                        <p>Загрузить список пользователей (/api/v1/user) и список комментариев (/api/v1/comment).</p>
                        <p>Вывести на странице всех пользователей с их комментариями.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="slide" id="task-4">
        <div class="box">
            <div class="row">
                <div class="col">
                    <h2>Задание 4</h2>
                </div>
            </div>
            <div class="row h_full">
                <div class="col">
                    <div class="box_cover offset_b_20">
                        <p><a href="https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4" target="_blank">https://gitlab.userstory.ru/userstory-temp/frontend-test-lesson-4</a></p>
                        <p>Загрузить список пользователей (/api/v1/user).</p>
                        <p>Загрузить список комментариев (/api/v1/comment) только для активных пользователей.</p>
                        <p>Вывести на странице активных пользователей с их комментариями.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="progress"></div>

    <script src="shower/shower.min.js"></script>
    <!-- Copyright © 2018 Yours Truly, Famous Inc. -->

</body>
</html>
